<template>
	<view class="xgplayer-container">
		<view :id="playerId" style="width: 100%; height: 100%;"></view>
	</view>
</template>

<script>
	import Player from 'xgplayer';

	export default {
		props: {
			// 视频源地址
			src: {
				type: String,
				default: 'https://www.douyin.com/aweme/v1/play/?video_id=v0200fg10000cuot7afog65mo0msi6hg&line=0&file_id=54d60031dc764dcf9cfde0becdf4370e&sign=e90dde77bcf88fdedfb17eed99e3da4e&is_play_url=1&source=PackSourceEnum_AWEME_DETAIL'
			},
			// 是否自动播放
			autoplay: {
				type: Boolean,
				default: false
			},
			// 封面图地址
			poster: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				playerId: `xgplayer-${Date.now()}`, // 生成唯一的 ID
				player: null
			};
		},
		mounted() {
			this.initPlayer();
		},
		beforeDestroy() {
			if (this.player) {
				this.player.destroy(); // 销毁播放器，避免内存泄漏
			}
		},
		methods: {
			initPlayer() {
				// const Player = require('xgplayer'); // 引入 XGPlayer
				// console.log(Player, 'Player'); // 确保 Player 不是 undefined
				this.player = new Player({
					id: this.playerId, // 播放器容器的 ID
					url: this.src, // 视频源地址
					autoplay: this.autoplay, // 是否自动播放
					poster: this.poster, // 封面图地址
					playsinline: true, // 允许内联播放
					fluid: true, // 自适应容器大小
					// 其他配置项...
				});
			}
		}
	};
</script>

<style scoped>
	.xgplayer-container {
		width: 100%;
		height: 100%;
	}
</style>